@tailwind base;
@tailwind components;
@tailwind utilities;

@layer components {
    .card {
        @apply bg-white rounded-lg shadow-md p-6;
    }
    
    .input {
        @apply w-full px-4 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500;
    }
    
    .btn {
        @apply px-4 py-2 bg-blue-500 text-white rounded-md hover:bg-blue-600 focus:outline-none focus:ring-2 focus:ring-blue-500;
    }
    
    .btn-secondary {
        @apply px-4 py-2 bg-gray-500 text-white rounded-md hover:bg-gray-600 focus:outline-none focus:ring-2 focus:ring-gray-500;
    }
    
    .table {
        @apply min-w-full divide-y divide-gray-200;
    }
    
    .table th {
        @apply px-6 py-3 bg-gray-50 text-left text-xs font-medium text-gray-500 uppercase tracking-wider;
    }
    
    .table td {
        @apply px-6 py-4 whitespace-nowrap text-sm text-gray-900;
    }
    
    .table tr {
        @apply hover:bg-gray-50;
    }
    
    .badge {
        @apply inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium;
    }
    
    .badge-high {
        @apply bg-red-100 text-red-800;
    }
    
    .badge-medium {
        @apply bg-yellow-100 text-yellow-800;
    }
    
    .badge-low {
        @apply bg-green-100 text-green-800;
    }
} 